<template>
    <div>
        <el-scrollbar 
            height="100%">
            <el-menu 
                ref="ElMenuRef"
                :collapse="false"
                :default-active="route.path"
                :router="false">
                <MenuItem
                    v-for="item,index in dataContainer.dataList"
                    :key="item.path"
                    :dataInfo="item"></MenuItem>
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script>
import {
    defineComponent,
    ref,
    reactive,
    computed,
    onMounted,
    watch,
    toRef,
    onUnmounted,
} from 'vue'
import { useRouter,useRoute } from "vue-router"
import menuItem from './menuItem.vue'
export default {
    name: 'Menu',
    components: {
        MenuItem,
    },
    props: {
        /** 所显示的数据列表 */
        dataList:{
            type:Array,
            default:()=>{
                return [];
            },
        },
    },
    setup () {

        const router = useRouter();
        const route = useRoute();
        const ElMenuRef = ref(null);
        const dataContainer = reactive({
            dataList:toRef(props,'dataList'),
        });

        /** 
         * 当页面加载后设置设置当前打开的父节点，因为如果父节点可点击的话不会自动打开
         * */
         onMounted(()=>{
            // if(!ElMenuRef.value) return;
            // let el = ElMenuRef.value.$el;
            // let hasActiveSubEl = el.querySelector('.el-sub-menu .is-sub-defin-active');
            // if(!hasActiveSubEl) return;
            // ElMenuRef.value.open(route.path);
        });

        return {
            dataContainer,
            ElMenuRef,
            route
        }
    }
}
</script>

<style lang="scss" scoped>

</style>